<template>
  <div class="email-register">
    <van-nav-bar 
      title="邮箱注册" 
      left-arrow 
      fixed 
      placeholder 
      @click-left="router.back()" 
      class="custom-nav"
    />
    <div class="register-header">
      <img src="@/assets/logo.png" alt="logo" class="logo">
      <h2 class="title">邮箱注册</h2>
      <p class="subtitle">请使用邮箱完成注册</p>
    </div>

    <van-form @submit="onSubmit" ref="formRef" :validate-first="true" class="register-form">
      <van-cell-group inset class="form-group">
        <van-field
          v-model="formData.email"
          type="email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="emailRules"
        >
          <template #left-icon>
            <i class="iconfont icon-email"></i>
          </template>
        </van-field>

        <van-field
          v-model="formData.code"
          center
          name="code"
          label="验证码"
          placeholder="请输入验证码"
          :rules="codeRules"
        >
          <template #left-icon>
            <i class="iconfont icon-verification"></i>
          </template>
          <template #button>
            <van-button
              size="small"
              type="primary"
              class="code-btn"
              :disabled="!!countdown || !formData.email || !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(formData.email)"
              @click="sendCode"
            >
              {{ countdown ? `${countdown}s后重新获取` : '获取验证码' }}
            </van-button>
          </template>
        </van-field>

        <van-field
          v-model="formData.password"
          :type="showPassword ? 'text' : 'password'"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="passwordRules"
        >
          <template #left-icon>
            <i class="iconfont icon-password"></i>
          </template>
          <template #right-icon>
            <van-icon 
              :name="showPassword ? 'eye-o' : 'closed-eye'" 
              @click="showPassword = !showPassword"
              class="eye-icon"
            />
          </template>
        </van-field>

        <van-field
          v-model="formData.confirmPassword"
          :type="showConfirmPassword ? 'text' : 'password'"
          name="confirmPassword"
          label="确认密码"
          placeholder="请再次输入密码"
          :rules="confirmPasswordRules"
        >
          <template #left-icon>
            <i class="iconfont icon-password"></i>
          </template>
          <template #right-icon>
            <van-icon 
              :name="showConfirmPassword ? 'eye-o' : 'closed-eye'" 
              @click="showConfirmPassword = !showConfirmPassword"
              class="eye-icon"
            />
          </template>
        </van-field>
      </van-cell-group>

      <div class="form-actions">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :loading="loading"
          class="submit-btn"
        >
          立即注册
        </van-button>
      </div>
    </van-form>

    <div class="other-actions">
      <div class="links">
        <router-link to="/auth/login" class="login-link">
          <i class="iconfont icon-back"></i>
          返回登录
        </router-link>
      </div>
      
      <div class="divider">
        <span>其他注册方式</span>
      </div>
      
      <div class="register-types">
        <van-button
          round
          block
          plain
          class="type-btn"
          @click="router.push('/auth/register')"
        >
          <i class="iconfont icon-user"></i>
          用户名注册
        </van-button>
        <van-button
          round
          block
          plain
          class="type-btn"
          @click="router.push('/auth/phone-register')"
        >
          <i class="iconfont icon-phone"></i>
          手机号注册
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useUserStore } from '@/stores/user'
import { emailRules, codeRules, passwordRules, generateConfirmPasswordRules } from '@/utils/validate'
import { useCountdown } from '@/composables/useCountdown'

const router = useRouter()
const userStore = useUserStore()
const formRef = ref()
const { countdown, startCountdown } = useCountdown()

const formData = reactive({
  email: '',
  code: '',
  password: '',
  confirmPassword: ''
})

const loading = ref(false)
const showPassword = ref(false)
const showConfirmPassword = ref(false)

const confirmPasswordRules = computed(() => 
  generateConfirmPasswordRules(formData.password)
)

const sendCode = async () => {
  try {
    await formRef.value?.validate('email')
    await userStore.sendEmailCode(formData.email)
    showToast('验证码已发送')
    startCountdown()
  } catch (error: any) {
    showToast(error?.message || '发送失败')
  }
}

const onSubmit = async (values: any) => {
  loading.value = true
  try {
    await userStore.emailRegister({
      email: values.email,
      code: values.code,
      password: values.password
    })
    showToast('注册成功')
    router.push('/auth/login')
  } catch (error: any) {
    showToast(error.message || '注册失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
// 不需要显式引入 variables.scss，因为已经在 vite.config.ts 中全局引入了
.email-register {
  min-height: 100vh;
  padding: $spacing-xl;
  background: linear-gradient(to bottom, lighten($primary-color, 35%), $white);

  .register-header {
    text-align: center;
    margin-bottom: $spacing-xl;
    
    .logo {
      width: 80px;
      height: 80px;
      margin-bottom: $spacing-md;
      border-radius: 20px;
      box-shadow: $shadow-sm;
    }
    
    .title {
      color: $text-primary;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: $spacing-xs;
    }

    .subtitle {
      color: $text-secondary;
      font-size: 14px;
    }
  }

  .register-form {
    .form-group {
      border-radius: $radius-lg;
      background: rgba($white, 0.8);
      backdrop-filter: blur(10px);
      box-shadow: $shadow-sm;
      overflow: hidden;

      :deep(.van-field) {
        padding: $spacing-lg $spacing-md;

        &::after {
          border-bottom: 1px solid rgba($border-color, 0.6);
        }

        .iconfont {
          font-size: 20px;
          color: $primary-color;
          margin-right: $spacing-sm;
        }

        .van-field__label {
          color: $text-primary;
          font-weight: 500;
        }

        input {
          color: $text-primary;
          
          &::placeholder {
            color: $text-placeholder;
          }
        }
      }

      .code-btn {
        height: 32px;
        padding: 0 $spacing-md;
        border-radius: $radius-md;
        font-size: 14px;
        background: $primary-color !important; // 使用主题色并强制覆盖
        border: none;

        &:active {
          opacity: 0.8;
        }

        &.van-button--disabled {
          background: $border-color !important;
          color: $text-placeholder;
        }
      }
    }

    .form-actions {
      margin-top: $spacing-xl;
      padding: 0 $spacing-md;

      .submit-btn {
        height: 44px;
        font-size: 16px;
        font-weight: 500;
        background: linear-gradient(to right, $primary-color, $primary-light);
        border: none;
        box-shadow: 0 4px 12px rgba($primary-color, 0.3);

        &:active {
          transform: translateY(1px);
        }
      }
    }
  }

  .other-actions {
    margin-top: $spacing-xl;
    
    .links {
      text-align: center;
      margin-bottom: $spacing-xl;
      
      .login-link {
        display: inline-flex;
        align-items: center;
        color: $primary-color;
        font-size: 14px;
        text-decoration: none;

        .iconfont {
          margin-right: $spacing-xs;
          font-size: 16px;
        }

        &:active {
          opacity: 0.8;
        }
      }
    }

    .divider {
      display: flex;
      align-items: center;
      margin: $spacing-lg 0;
      
      &::before,
      &::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba($border-color, 0.6);
      }
      
      span {
        padding: 0 $spacing-md;
        color: $text-secondary;
        font-size: 14px;
      }
    }

    .register-types {
      .type-btn {
        margin-bottom: $spacing-md;
        height: 44px;
        border-color: $primary-color;
        color: $primary-color;
        font-size: 15px;
        
        &:last-child {
          margin-bottom: 0;
        }

        .iconfont {
          margin-right: $spacing-xs;
          font-size: 18px;
        }

        &:active {
          background-color: rgba($primary-color, 0.05);
        }
      }
    }
  }
}

:deep(.eye-icon) {
  font-size: 16px;
  color: #666;
  padding: 10px;
  margin-right: -10px;
  cursor: pointer;
  
  &:active {
    opacity: 0.7;
  }
}
</style>











